<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
        <span>提取记录表</span>
    </div>
     <el-table
      :data="tableData"
      stripe
      style="width: 100%">
       <el-table-column
        prop="carrierFile"
        label="算法类型"
        width="160">
        <template slot-scope="scope">
            <!-- <img :src="scope.row.carrierFile" alt="" style="width: 50px;height: 50px"> -->
            <div>{{gettype(scope.row)}}</div>
        </template>
      </el-table-column>
          <el-table-column
        prop="containSecretFile"
        label="载密图像"
        width="160">
        <template slot-scope="scope">
          <!-- <img :src="scope.row.containSecretFile" alt="" style="width: 50px;height: 50px"> -->
          <img :src="scope.row.containSecretImage" alt="" v-if="scope.row.containSecretImage" style="width: 50px;height: 50px">
        </template>
      </el-table-column>
       <el-table-column
        prop="carrierEncryptedFile"
        label="载密加密图像"
        width="160">
        <template slot-scope="scope">
          <!-- <img :src="scope.row.carrierEncryptedFile" alt="" style="width: 50px;height: 50px"> -->
          <img :src="scope.row.carrierEncryptedImage" alt="" v-if="scope.row.carrierEncryptedImage" style="width: 50px;height: 50px">
        </template>
      </el-table-column>
      <el-table-column
        prop="carrierFile"
        label="恢复后的图像"
        width="160">
        <template slot-scope="scope">
            <!-- <img :src="scope.row.carrierFile" alt="" style="width: 50px;height: 50px"> -->
          <img :src="scope.row.restoredImage" alt="" v-if="scope.row.restoredImage" style="width: 50px;height: 50px">
        </template>
      </el-table-column>
       <el-table-column
        prop="extractedSecretData"
        label="提取的秘密信息"
        width="160">
      </el-table-column>
       <el-table-column
         prop="11111111"
         label=""
         >
       </el-table-column>
<!--      <el-table-column-->
<!--        prop="imageKey"-->
<!--        label="图像恢复密钥"-->
<!--        width="160">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="dataKey"-->
<!--        label="信息提取密钥">-->
<!--      </el-table-column>-->
    </el-table>
  </el-card>
</template>

<script>
export default {
  name:'InsertList',
   data() {
      return {
        tableData: []
      }
    },
    mounted(){
      this.$axios
        .get("http://localhost:8888/user/select?isEmbed=1")
        .then((res) => {
          // 这里是在算法回来后再次调用后端接口存起来
          // res.data
          this.tableData = res.data
          console.log(res, '存储成功111')
        }).catch(error => {
        // 处理错误
        console.error('Error uploading file:', error);
      });
    },
    methods: {
      gettype(item){
        if (!item.carrierEncryptedImage){
          return '明文提取'
        }else{
          if (!item.restoredImage  ){
            return '密文提取'
          }
          if (!item.extractedSecretData){
            return '原始图像提取'
          }else{
            return '密文提取并恢复'
          }
        }
          return item.isEmbed
      }
    }
}
</script>

<style scoped>
.box-card{
  overflow: auto;
  width: 90%;
  height: 700px;
  background: #fff;
  padding: 20px;
  border: 1px solid #ebebeb;
  border-radius: 3px;
  position: relative;
  box-shadow: 0 0 8px rgba(232, 237, 250, .6),
  0 2px 4px 0 rgba(232, 237, 250, .5)
}
.clearfix{
  text-align: center;
  font-size: 24px;
  font-weight: 500;
}
</style>
